<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>淘宝网 - 淘！我喜欢</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
  <header class="header-container">
    <div class="header juzhong">
      <div class="header-left">
        <ul>
          <li>
            <span>中国大陆</span>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li><a href="#" class="cf40">亲,请登录</a></li>
          <li><a href="#">免费注册</a></li>
          <li><a href="#">手机逛淘宝</a></li>
        </ul>
      </div>
      <div class="header-right">
        <ul>
          <li>
            <a href="#">我的淘宝</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li>
            <span class="iconfont icon-gouwuche cf40"></span>
            <a href="#">购物车</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li>
            <span class="iconfont icon-shoucangjia c9c9c9c"></span>
            <a href="#">收藏夹</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li>
            <a href="#">商品分类</a>
          </li>
          <li class="header-shu">|</li>
          <li>
            <a href="#">千牛卖家中心</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li>
            <a href="#">联系客服</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
          <li>
            <span class="iconfont icon-fenlei cf40"></span>
            <a href="#">网站导航</a>
            <span class="iconfont icon-xiajiantou"></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="activity-wrap">
      <div class="activity juzhong">
        <img src="./images/header-img.png" alt="活动">
      </div>
    </div>
  </header>
  <!-- 搜索 -->
  <section class="search-container">
    <div class="search juzhong">
      <div class="search-left">
        <h1>
          <a href="#" class="logo-text">淘宝网</a>
        </h1>
      </div>
      <div class="search-right fr">
        <span class="iconfont icon-chacha chacha"></span>
        <div class="two-code-wrap">
          <p>手机淘宝</p>
          <img class="two-code" src="./images/search-right.png" alt="">
        </div>
      </div>
      <div class="search-center">
        <div class="search-content">
          <ul>
            <li>宝贝</li>
            <li>天猫</li>
            <li>店铺</li>
          </ul>
          <div class="input-search-wrap">
            <form action="#">
              <div>
                <input type="text" class="input-search">
                <div class="search-recommend">
                  <span class="iconfont icon-fangdajing"></span>
                  <span class="search-keywords">胖妹妹秋款新款 2019</span>
                </div>
                <span class="iconfont icon-zhaoxiangji imgToSearch"></span>
              </div>
              <div>
                <button class="submit-btn">搜索</button>
              </div>
            </form>
          </div>
          <div class="hotKeywords">
            <a href="#" class="cf40">面膜</a>
            <a href="#">时尚连衣裙</a>
            <a href="#" class="cf40">零食大礼包</a>
            <a href="#">蓝牙耳机</a>
            <a href="#">沙发</a>
            <a href="#" class="cf40">定制窗帘</a>
            <a href="#">男士内裤</a>
            <a href="#">吊灯</a>
            <a href="#">办公桌</a>
            <a href="#">地毯</a>
            <a href="#">餐桌</a>
            <a href="#">厨房置物架</a>
            <a href="#">吸顶灯</a>
          </div>
        </div>
      </div>

    </div>
  </section>
  <!-- 导航 -->
  <nav class="nav clearfix juzhong">
    <div class="nav-left">
      <h2>主题市场</h2>
    </div>
    <div class="nav-right">
      <ul class="flex">
        <li><a href="#" class="nav-font16">天猫</a></li>
        <li><a href="#" class="nav-font16">聚划算</a></li>
        <li><a href="#" class="nav-font16">天猫超市</a></li>
        <li class="nav-line">|</li>
        <li><a href="#">淘抢购</a></li>
        <li><a href="#">电器城</a></li>
        <li><a href="#">司法拍卖</a></li>
        <li><a href="#">淘宝心选</a></li>
        <li><a href="#">兴农扶贫</a></li>
        <li class="nav-line">|</li>
        <li><a href="#">飞猪旅行</a></li>
        <li><a href="#">智能生活</a></li>
        <li><a href="#">苏宁易购</a></li>
        <li><a href="#"><img src="./images/yunxidahui.gif" alt="云析大会"></a></li>
      </ul>
    </div>
  </nav>
  <!-- 首屏 -->
  <section class="first-screen juzhong clearfix">
    <!-- 首屏左侧 -->
    <div class="first-screen-left fl">
      <!-- 侧边栏 -->
      <div class="frist-nav-side fl">
        <ul>
          <li>
            <a href="#">女装</a> /
            <a href="#">男装</a> /
            <a href="#">内衣</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">鞋靴</a> /
            <a href="#">箱包</a> /
            <a href="#">配件</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">童装玩具</a> /
            <a href="#">孕产</a> /
            <a href="#">用品</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">家电</a> /
            <a href="#">数码</a> /
            <a href="#">手机</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">美妆</a> /
            <a href="#">洗护</a> /
            <a href="#">保健品</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">珠宝</a> /
            <a href="#">眼镜</a> /
            <a href="#">手表</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">运动</a> /
            <a href="#">户外</a> /
            <a href="#">内乐器衣</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">游戏</a> /
            <a href="#">动漫</a> /
            <a href="#">影视</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">美食</a> /
            <a href="#">生鲜</a> /
            <a href="#">零食</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">鲜花</a> /
            <a href="#">宠物</a> /
            <a href="#">农资</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">工具</a> /
            <a href="#">装修</a> /
            <a href="#">建材</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">家具</a> /
            <a href="#">家饰</a> /
            <a href="#">家纺</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">汽车</a> /
            <a href="#">二手车</a> /
            <a href="#">用品</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">办公</a> /
            <a href="#">DIY</a> /
            <a href="#">五金电子</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">百货</a> /
            <a href="#">餐厨</a> /
            <a href="#">家庭保健</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>
          <li>
            <a href="#">学习</a> /
            <a href="#">卡券</a> /
            <a href="#">本地服务</a>
            <span class="iconfont icon-youjiantou"></span>
          </li>

        </ul>
      </div>
      <!-- 图片容器1 -->
      <div class="frist-img-container1 fr">
        <div class="frist-img-container1-left fl relative">
          <ul id="carouselUl">
            <li>
              <a href="#">
                <img src="./images/lunbo-1.png" alt="轮播图1">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/lunbo-2.webp" alt="轮播图1">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/lunbo-3.jpg" alt="轮播图1">
              </a>
            </li>
          </ul>
          <button id="turnToLBtn" class="turnToL iconfont turnBtn icon-changyongtubiao-xianxingdaochu-zhuanqu-"></button>
          <button id="turnToRBtn" class="turnToR iconfont turnBtn icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></button>
          <div class="turnCircle">
            <ul id="turnCircleUl" class="clearfix">
              <!-- <li class="active"></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li> -->
            </ul>
          </div>
        </div>
        <div class="frist-img-container1-right fr">
          <a href="#">
            <img src="./images/广告.png" alt="广告1">
          </a>
        </div>
      </div>
      <!-- 图片容器2 -->
      <div class="frist-img-container2 fr">
        <div class="frist-img-container2-left fl relative">
          <div>
            <a href="#">
              <img src="./images/下轮播左.jpg" alt="下轮播左">
            </a>
            <a href="#">
              <img src="./images/下轮播右.jpg" alt="下轮播右">
            </a>
          </div>
          <span class="img2-number"><i>1</i>/6</span>
          <button class="turnToL iconfont turnBtn icon-changyongtubiao-xianxingdaochu-zhuanqu-"></button>
          <button class="turnToR iconfont turnBtn icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></button>
        </div>
        <div class="frist-img-container2-right relative fr">
          <h5 class="today-hot">今日热卖</h5>
          <a href="#">
            <img src="./images/广告-1.jpg" alt="广告2">
          </a>
        </div>
      </div>
      <!-- 淘宝头条 -->
      <div class="tb-headline-news fl clearfix">
        <div class="toutiao-left fl">
          <h3>
            <em>头版头条</em>
          </h3>
          <p>让你的生活更有趣</p>
        </div>
        <div class="toutiao-right fl">
          <img src="./images/tsb.webp" alt="糖酥饼真香警告" class="fl">
          <div class="fl">
            <h5>
              <em>糖酥饼真香警告</em>
              <span>更多</span><span class="iconfont icon-youjiantou"></span>
            </h5>
            <p>就是这样充满烟火气的食物，总是深深虏获了大人小孩的心。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 首屏右侧 -->
    <div class="first-screen-right fr">
      <div class="first-right-member">
        <img src="./images/member-avatar.png" alt="头像">
        <p class="greetings">Hi! 你好</p>
        <p class="taojinbi-julebu">
          <a href="#">
            <i class="iconfont icon-jinbi"></i>
            <span>领淘金币抵钱</span>
          </a>
          <a href="#">
            <i class="iconfont icon-jinbishangcheng"></i>
            <span>会员俱乐部</span>
          </a>
        </p>
        <div class="member-btn">
          <button>登录</button>
          <button>注册</button>
          <button>开店</button>
        </div>
      </div>
      <div class="jubao">
        <p>
          <a href="#">网上有害信息举报区</a>
          <i class="iconfont icon-youjiantou1"></i>
        </p>
      </div>
      <div class="notice">
        <ul class="clearfix">
          <li><a href="#">公告</a></li>
          <li><a href="#">规则</a></li>
          <li><a href="#">论坛</a></li>
          <li><a href="#">安全</a></li>
          <li><a href="#">公益</a></li>
        </ul>
        <div class="notice-content">
          <p class="cf40">95公益周阿里、腾讯等六家公司同台联合做公益</p>
          <p>淘宝造物节之城市秘密聚划算88红包省钱卡</p>
        </div>
      </div>
      <div class="conve">
        <ul class="clearfix">
          <li>
            <a href="#">
              <span class="conve-item1"></span>
              <p>充话费</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item2"></span>
              <p>旅行</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item3
              "></span>
              <p>车险</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item4"></span>
              <p>游戏</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item5"></span>
              <p>彩票</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item6"></span>
              <p>电影</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item7"></span>
              <p>酒店</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="conve-item8"></span>
              <p>理财</p>
            </a>
          </li>
          <li class="border-bottom-f4f4f4">
            <a href="#">
              <span class="conve-item9"></span>
              <p>找服务</p>
            </a>
          </li>
          <li class="border-bottom-f4f4f4">
            <a href="#">
              <span class="conve-item10"></span>
              <p>演出</p>
            </a>
          </li>
          <li class="border-bottom-f4f4f4">
            <a href="#">
              <span class="conve-item11"></span>
              <p>水电煤</p>
            </a>
          </li>
          <li class="border-bottom-f4f4f4">
            <a href="#">
              <span class="conve-item12"></span>
              <p>火车票</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="al-app">
        <h5>
          <em>阿里APP</em>
          <a href="#">
            <span></span>更多<i class="iconfont icon-youjiantou"></i>
          </a>
        </h5>
        <ul class="app-item-wrap clearfix">
          <li>
            <a href="#">
              <img src="./images/app-1.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-2.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-3.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-4.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-5.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-6.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-7.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-8.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-9.webp">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/app-10.webp">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <script src="./js/carousel.js"></script>
</body>

</html>